<template>
  <i :class="classes" v-on="$listeners"></i>
</template>
<script>
export default {
  name: 'CIcon',
  components: {},
  props: {
    name: { type: String, default: '' },
    right: { type: Boolean, default: false },
    left: { type: Boolean, default: false },
    prefix: { type: Boolean, default: false }
  },
  data() {
    return {}
  },
  computed: {
    classes() {
      const { name, right, left, prefix } = this
      const icon = name.replace('a-icon', 'icon')
      return [
        'c-icon',
        icon &&
          (icon.replace('a-icon', 'icon').split('-')[0] === 'icon'
            ? icon
            : 'icon-' + icon),
        right && 'c-icon_mr',
        left && 'c-icon_ml',
        prefix && 'c-icon-prefix'
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}
}
</script>
<style lang="scss">
@include web {
  .c-icon_mr {
    margin-right: 14px;
  }
  .c-icon_ml {
    margin-left: 14px;
  }
  .c-icon-prefix {
    font-size: 16px;
    vertical-align: middle;
  }
}
</style>
